<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" style="font-weight: bolder;" href="">
                <span class="ulogo img" style="background-image:url(/favicon.gif);"></span>
                <span>&nbsp;</span>
                <span style="color:#833">H</span>
                <span style="color:#722">o</span>
                <span style="color:#611">n</span>
                <span style="color:#722">g</span>
                <span style="color:#833">s</span>
                <span style="color:#eaa">C</span>
                <span style="color:#ebb">O</span>
                <span style="color:#fcc">R</span>
                <span style="color:#fdd">E</span>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="main-collapse">
            <ul class="nav navbar-nav navbar-left " id="curr-menubar">
                <li><a data-href="page/tree.html" href="#demo">演示</a></li>
                <li><a data-href="page/apis.html" href="#apis">文档</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" id="main-menubar">
                <li>
                    <a href="javascript:;" data-toggle="hsOpen" data-href="page/form.html">
                        <span class="uhead img" style="background-image:url(../icons/head_icon.jpg);"></span>
                    </a>
                </li>
                <li class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        <i title="abc@def.com">哈哈 </i>
                        <span class="badge">3</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="javascript:;" id="note1">通知</a></li>
                        <li><a href="javascript:;" id="warn1">警告</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;" id="warn2">确认</a></li>
                        <li><a href="javascript:;" id="view2">浮窗</a></li>
                        <li><a href="javascript:;" id="prog1">进行中</a></li>
                        <li><a href="javascript:;" id="prog2">进度条</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<nav class="navbar navbar-default navbar-fixed-bottom container">
    <blockquote>
        <p class="clearfix">
            <span>Copyleft &copy; 2021 Hongs.</span>
            <span class="pull-right text-muted">Powered by <a href="https://github.com/ihongs/HongsCORE/" target="_blank">HongsCORE</a>.</span>
        </p>
    </blockquote>
</nav>

<script type="text/javascript">
    (function($) {
        //** 通知演示 **/

        $("#note1").click(function() {
            $.hsNote("这是一般通知，可用于操作成功的告示，一会儿自动消失", "success");
        });
        $("#warn1").click(function() {
            $.hsWarn("这是警告通知，可用于操作失败的警告，点其他地方消失", "warning");
        });
        $("#warn2").click(function() {
            $.hsWarn("这是确认提示，可用于操作确认的选择，点按钮执行操作\r\n"+
                     "这里可以放一些说明文字，比如点击确定会彻底删除，已删除的数据将无法恢复。您仍然确定操作吗？",
                     "warning",
            function() {
                $.hsNote("您点击了确定", "info");
            },
            function() {
                $.hsNote("您点击了取消", "danger");
            }).addClass("alert-danger");
        });
        $("#view2").click(function() {
            $.hsMask({
                title: "这是模态浮层，可用于操作辅助和提示，点按钮执行操作",
                text : "这里可以放一些说明文字，比如点击确定会彻底删除，已删除的数据将无法恢复。您仍然确定操作吗？"
            }, {
                label: "确定",
                glass: "btn-primary",
                click: function() {
                    $.hsNote("您点击了确定", "info");
                }
            }, {
                label: "取消",
                glass: "btn-default",
                click: function() {
                    $.hsNote("您点击了取消", "danger");
                }
            });
        });
        $("#prog1").click(function() {
            var box = $.hsWait("开始上传 C:\\WINDOWS\\SYSTEM32\\CONFIG\\SYSTEM");
        });
        $("#prog2").click(function() {
            var box = $.hsWait("开始上传 C:\\WINDOWS\\SYSTEM32\\CONFIG\\SYSTEM");
            var cnt = 0;
            var ord = 1;
            var tim = new Date().getTime();
            setInterval(function() {
                if (ord) {
                    cnt += Math.floor(Math.random() * 100) % 5 ;
                    if (cnt > 99) {
                        cnt = 99;
                        ord = 0 ;
                    }
                } else {
                    cnt -= Math.floor(Math.random() * 100) % 20;
                    if (cnt < 1 ) {
                        cnt = 1 ;
                        ord = 1 ;
                    }
                }
                box.progress(cnt / 100, new Date().getTime() - tim);
            } , 1000);
        });

        //** 菜单控制 **/

        $("#curr-menubar>li>a")
            .filter(function() {
                return !! $(this).attr("data-href");
            })
            .click(function() {
                var h  =  $(this).attr("data-href");
                var p  =  $(this).attr("data-hreq");
                if (p) {
                    $(this).removeAttr("data-hreq");
                    if (h.index('?') != -1 ) {
                        h += '?' + p;
                    } else {
                        h += '&' + p;
                    }
                }
                $("#main-context").hsLoad(h);
                $(this).closest("li").addClass("active")
                       .siblings().removeClass("active");
            });
        $("#main-menubar>li>a")
            .click(function() {
                var that = $(this);
                setTimeout(function() {
                    that.parent( ).removeClass("active");
                    that.blur  ( );
                }, 100);
            });

        $(function() {
            if ($("#curr-menubar .active").size()) {
                return;
            }
            if ($("#curr-menubar li").size() == 0) {
                $( document ).trigger ( "noMenu" );
                return;
            }
            // Click the first available menu item
            var a;
            if (location.hash) {
                // #def&x=1&y=2
                var h = location.hash ;
                var p = h.indexOf('&');
//              h = "<%=u%>/" + h;
                p = p != -1 ? h.substring(p + 1) : "" ;
                a = $("#curr-menubar a[href='"+h+"']");
                a.attr("data-hreq", p);
            } else {
                a = $("#curr-menubar a").first();
            }
            if (a.size() == 0) {
//              a = $("#main-menubar ul.dropdown-menu a").first();
            }
            a.click();
        });
        
        /**
         * 关闭按钮事件处理
         */
        $(document).on("click", ".cancel,.recant" , function() {
            var b0  = $(this).closest(".dont-close")
                             .hsFind ("@");
            var b1  = $(this).hsFind ("@");
            if (b0 != b1) {
                b1.hsClose( );
            }
        });
    })(jQuery);
</script>
